<template>
  <div>
    <div
      class="header"
      style="
        width: 99%;
        background: #f5f5f6;
        height: 180px;
        border: 1px solid #f5f5f6;
      "
    >
      <p
        style="
          text-align: center;
          margin-left: -10%;
          font-size: 32px;
          font-weight: bold;
        "
      >
        发布我的房源需求
      </p>
      <p style="text-align: center; margin-left: -8%; color: gray">
        业主一对一沟通 · 精准定位好房源
      </p>
    </div>
    <el-container>
      <el-main>
        <el-card
          style="
            margin-left: 10%;
            margin-top: 5%;
            width: 80%;
            height: auto;
            padding-bottom: 15%;
          "
        >
          <div class="form" style="margin-top: 5%; width: 98%; height: 70px">
            <el-form ref="form" :model="form" label-width="100px">
              <!-- <el-form-item style="font-weight: bold" label="标题">
                <el-input style="width: 50%" v-model="form.title"></el-input>
              </el-form-item> -->
              <el-form-item style="font-weight: bold" label="所在城市">
                &nbsp;&nbsp;&nbsp;
                <span style="color: gray">青岛市</span>
              </el-form-item>

              <el-form-item
                style="font-weight: bold"
                label="区域"
                prop="hdistrict"
              >
                <el-cascader
                  :options="options"
                  clearable
                  v-model="form.hdistrict"
                ></el-cascader>
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="租金"
                prop="hprice"
              >
                <el-input style="width: 50%" v-model="form.hprice"></el-input
                >元/月
              </el-form-item>
              <el-form-item style="font-weight: bold" label="面积" prop="harea">
                <el-input style="width: 50%" v-model="form.harea"></el-input
                >平方米
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="朝向"
                prop="horientation"
              >
                <el-select style="width: 50%" v-model="form.horientation">
                  <el-option label="东" value="东"></el-option>
                  <el-option label="西" value="西"></el-option>
                  <el-option label="南" value="南"></el-option>
                  <el-option label="北" value="北"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="font-weight: bold" label="租期" prop="hterm">
                <el-select v-model="form.hterm" placeholder="请选择租期">
                  <el-option label="月租" value="月租"></el-option>
                  <el-option label="半年起" value="半年起"></el-option>
                  <el-option label="一年起" value="一年起"></el-option>
                  <el-option label="两年起" value="两年起"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="出租方式"
                prop="hmode"
              >
                <el-select v-model="form.hmode" placeholder="请选择出租方式">
                  <el-option label="整租" value="整租"></el-option>
                  <el-option label="合租" value="合租"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="楼层"
                prop="hfloor"
              >
                <el-select v-model="form.hfloor" placeholder="请选择楼层">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
                  <el-option label="4" value="4"></el-option>
                  <el-option label="5" value="5"></el-option>
                  <el-option label="6" value="6"></el-option>
                  <el-option label="7" value="7"></el-option>
                  <el-option label="8" value="8"></el-option>
                  <el-option label="9" value="9"></el-option>
                  <el-option label="10" value="10"></el-option>
                  <el-option label="11" value="11"></el-option>
                  <el-option label="12" value="12"></el-option>
                  <el-option label="13" value="13"></el-option>
                  <el-option label="14" value="14"></el-option>
                  <el-option label="15" value="15"></el-option>
                  <el-option label="16" value="16"></el-option>
                  <el-option label="17" value="17"></el-option>
                  <el-option label="18" value="18"></el-option>
                  <el-option label="18+" value="19"></el-option>
                </el-select>
                <span>楼</span>
              </el-form-item>
              <el-form-item style="font-weight: bold" label="户型" prop="htype">
                <el-radio-group v-model="form.htype">
                  <el-radio label="1室" value="1室"></el-radio>
                  <el-radio label="2室" value="2室"></el-radio>
                  <el-radio label="3室" value="3室"></el-radio>
                  <el-radio label="4室" value="4室"></el-radio>
                  <el-radio label="4室+" value="4室+"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="电梯有无"
                prop="helevator"
              >
                <el-radio-group v-model="form.helevator">
                  <el-radio label="有电梯" value="1"></el-radio>
                  <el-radio label="无电梯" value="0"></el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 默认为用户电话 -->
              <el-form-item
                style="font-weight: bold"
                label="联系电话"
                prop="hphone"
              >
                <el-input style="width: 50%" v-model="form.hphone"></el-input>
              </el-form-item>
              <el-form-item
                style="font-weight: bold"
                label="备注"
                prop="hdescribe"
              >
                <el-input
                  style="width: 80%"
                  type="textarea"
                  v-model="form.hdescribe"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  plain
                  style="font-weight: bold; margin-left: 37%"
                  type="primary"
                  @click="onSubmit"
                  >提交委托</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-main>
      <br />
      <br />
      <el-footer style="display: flex; color: #f5f5f6">
        <div style="width: 20%; height: 90px; align-self: center">
          <p style="text-align: center; margin-top: 28px">
            <a
              style="
                color: #545c64;
                font-size: 26px;
                font-weight: bold;
                text-decoration: none;
              "
              href="#/"
              >泊寓</a
            >
          </p>
        </div>
        <div
          style="width: 50%; height: 90px; align-self: center; margin-left: 3%"
        >
          <p style="color:black;font-size: 13px; text-align: center; margin-top: 35px">
            <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
            31010402000253号 | 鲁ICP备17003747号
          </p>
        </div>
        <div
          style="width: 20%; height: 90px; align-self: center; margin-left: 3%"
        >
          <p style="color:black;font-size: 13px; text-align: center; margin-top: 35px">
            <i class="el-icon-phone-outline">010-6088-8888</i>
          </p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { addHouse } from "@/network/house";
export default {
  data() {
    var checkPrice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("租金不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var checkArea = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("面积不能为空"));
      }
      setTimeout(() => {mianji
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      title: "",
      form: {
        // hdistrict: "市南区",
        // hestate: "奥帆中心",
        // haddress: "青岛市市南区东海中路22号",
        hprice: "",
        // htitle: "合租·信海花园 4居室 南卧",
        // hmode: "合租",
        // htype: "4室1厅1卫",
        // himg: "src/img",
        // hphone: "1231414",
        // hreleasedate: "2020-12-07 01:07:46",
        harea: "",
        // hfloor: 6,
        // horientation: "南",
        // helevator: true,
        // hterm: "半年起",
        // hdescribe:
        //   "无中介费、无物业费、无网费\r\n1、合租单间，不限男女\r\n2、照片真实！\r\n3、配套齐全，拎包入住\r\n4、押一付三，找长期稳定租户\r\n5、有洗衣机，冰箱，热水器,wiff,可洗澡可做饭!\r\n",
        // tag: "1",
        // loaction: "231",
        // goodhouse: true,
        htitle: "标题",
        hreleasedate: "",
        uid: "",
      },
      options: [
        {
          value: "崂山区",
          label: "崂山区",
          children: [
            {
              value: "石老人",
              label: "石老人",
            },
            {
              value: "崂山风景区",
              label: "崂山风景区",
            },
            {
              value: "张村",
              label: "张村",
            },
            {
              value: "西韩",
              label: "西韩",
            },
          ],
        },
        {
          value: "市南区",
          label: "市南区",
          children: [
            {
              value: "奥帆中心",
              label: "奥帆中心",
            },
            {
              value: "八大关",
              label: "八大关",
            },
            {
              value: "火车站",
              label: "火车站",
            },
            {
              value: "CBD",
              label: "CBD",
            },
          ],
        },
        {
          value: "市北区",
          label: "市北区",
          children: [
            {
              value: "台东",
              label: "台东",
            },
            {
              value: "错埠岭",
              label: "错埠岭",
            },
            {
              value: "新都心",
              label: "新都心",
            },
            {
              value: "浮山后",
              label: "浮山后",
            },
          ],
        },
        {
          value: "李沧区",
          label: "李沧区",
          children: [
            {
              value: "李村",
              label: "李村",
            },
            {
              value: "河南",
              label: "河南",
            },
            {
              value: "书院路",
              label: "书院路",
            },
            {
              value: "李沧万达",
              label: "李沧万达",
            },
          ],
        },
      ],
      fileList: [],
      rules: {
        hprice: [{ required: true, validator: checkPrice, trigger: "blur" }],
        harea: [{ required: true, validator: checkPrice, trigger: "blur" }],
      },
      param: "",
    };
  },
  created() {
    // alert(this.$store.state.user.uimg);
    // if (this.$store.state.user.uid === "") {
    //   this.$message.error("请先登录/注册！");
    //   this.$router.push("/");
    // }
  },
  mounted() {
    this.form.hphone = this.$store.state.user.uphone;
  },
  methods: {
    //  submitForm(formName) {
    //     this.$refs[formName].validate((valid) => {
    //       if (valid) {
    //         alert('submit!');
    //       } else {
    //         console.log('error submit!!');
    //         return false;
    //       }
    //     });
    //   },
    //   resetForm(formName) {
    //     this.$refs[formName].resetFields();
    //   },

    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    onSubmit() {
      console.log("submit!");
      let param = new FormData();
      console.log(this.form.helevator);
      this.form.helevator = this.form.helevator === "有电梯" ? "true" : false;

      // let form = new FormData();
      // this.$refs.upload.$children[0].fileList.forEach(function (file) {
      // console.log(this.fileList);
      // param.append("files", this.fileList[0])
      this.fileList.forEach(function (file) {
        param.append("files", file.raw, file.name);
      });
      this.form.uid = this.$store.state.user.uid;
      // this.form.hreleasedate = new Date()
      Object.keys(this.form).forEach((ele) => {
        param.append(ele, this.form[ele]);
      });
      // console.log()
      // param.append('uid', this.$store.state.user.uid)
      console.log("form", this.form);
      console.log("param", param);
      addHouse(param).then((res) => {
        // console.log("成功");
        if (res.status) {
          this.$message({
            message: "恭喜你，" + res.msg,
            type: "success",
          });
          this.$router.push("/userMessage");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    changeFile(file, fileList) {
      let fileName = file.name;
      let regex = /(.jpg)$/;
      if (regex.test(fileName.toLowerCase())) {
        this.fileList = fileList;
      } else {
        this.$message.error("请选择jpg类型的图片文件");
      }
      // console.log(`fileList:${this.fileList}`);
    },
  },
};
</script>

<style>
.el-upload-list {
  width: 50%;
}
</style>